<!--
 * @Description: 添加更多字段
 * @Autor: lily
 * @Date: 2021-04-14 16:20:06
 * @LastEditors: lily
 * @LastEditTime: 2021-04-14 19:31:27
-->
<template>
  <base-modal
    :show.sync="visiable"
    width="628px"
    class="morefields-dialog"
    @closed="onClose"
    
  >
    <div slot="title">
      <span class="el-dialog__title">{{ $t('product.productType.title.title7') }}</span>
    </div>
    <div class="base-modal-content">
      <p class="modal-title">
        <i18n path="product.productType.tips.tip28">
          <span place="clickHere" @click="onSetForm">{{ $t('product.productType.btns.btn13') }}</span>
        </i18n>
      </p>
      <el-checkbox-group v-model="checkList">
        <template v-for="item in fields">
          <el-checkbox
            v-if="item.isSystem != 1"
            :label="item.id"
            :key="item.id">{{ item.displayName }}
          </el-checkbox>
        </template>
      </el-checkbox-group>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="onSubmit('form')">{{ $t('common.base.makeSure') }}</el-button>
    </div>
  </base-modal>
</template>
<script>
// api
import * as SettingTaskApi from '@src/api/SettingTaskApi';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'

export default {
  name: 'add-fields-dialog',
  props: {
    fields: {
      type: Array,
      default: () => ([])
    },
    fieldIds: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      checkList:[],
      visiable: false,
    };
  },
  methods: {
    // 进入自定义
    onSetForm() {
      // this.$platform.openTab({
      //   id: 'product_field',
      //   title: '产品类型表单设置',
      //   close: true,
      //   url: '/setting/productV2/catalog/settingField'
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductField
      })
    },
    openDialog() {
      this.visiable = true;
      this.checkList = this.fieldIds;
    },
    onClose() {
      this.visiable = false;
      this.$emit('onClose')   
    },
    onSubmit() {
      this.visiable = false;
      this.$emit('onSubmit', this.checkList)   
    }
  },
};
</script>
<style lang="scss">
.morefields-dialog {
  .base-modal-header {
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      font-size: 18px;
    }
    .el-tooltip {
      color: #999;
    }
  }
  .base-modal-body {
    padding: 12px 20px 20px 20px;
  }
  .base-modal-content{
      .modal-title{
        font-size: 14px;
        font-weight: 400;
        color: #8C8C8C;
        line-height: 22px;
        span{
            cursor: pointer;
            color: $color-primary;
        }
      }
  }
}
</style>